<template>
  <div class="mask" :class="{ active: maskNum === num, 'mask-error': type === 'error-area' }">
    <div class="title f16" @click="changeMasks">
      <div class="t-font" style="line-height: 26px">
        {{ type === "error-area" ? "预警运营地区" : "营运地区" }} {{ areaList.areaList.length }}
      </div>
      <div class="t-icon">
        <el-icon>
          <CaretBottom />
        </el-icon>
      </div>
    </div>
    <div class="m-area f16" v-for="(item, i) in areaList.areaList" :key="i">
      <div class="province f14">
        {{ item.areaName }}
      </div>
      <div class="market" v-for="(items, a) in item.children" :key="a">
        <div class="markets f12">
          {{ items.areaName }}
        </div>
        <div style="display: flex">
          <div class="marea-box" v-for="(itema, b) in items.children" :key="b">
            <div class="shop-name">{{ itema.areaName }}({{ itema.planNum }})</div>
            <div class="shop-num">商家数：{{ itema.collectedNum }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { getOperateAreaList } from "@/api/products/selection";
import { throttle } from "../untils/debounce";
const emit = defineEmits(["changeMasks"]);
const props = defineProps({
  maskNum: {
    type: Number,
    default: -99
  },
  num: {
    type: Number,
    default: -92
  },
  productId: {
    type: String,
    default: ""
  },
  type: {
    type: String,
    default: ""
  },
  areaData: {
    type: Array,
    default: () => null
  }
});

const areaList = reactive({
  areaList: []
});
const changeMasks = () => {
  console.log(props);
  emit("changeMasks");
};
const getOperateAreaLists = id => {
  if (props.areaData) {
    areaList.areaList = props.areaData;
  } else {
    const postData = {
      productId: id
    };
    getOperateAreaList(postData)
      .then(res => {
        areaList.areaList = res.data;
      })
      .catch(error => {
        console.log(error);
      });
  }
};
onMounted(() => {
  // getOperateAreaLists();
});
defineExpose({
  getOperateAreaLists
});
</script>

<style lang="scss" scoped>
@mixin flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.mask {
  position: absolute;
  top: 400px;
  min-width: 294px;
  width: 100%;
  color: #fff;
  overflow: auto;
  height: 400px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 10px 10px 10px 10px;
  left: 0px;
  backdrop-filter: blur(10px);
  transition: all 0.5s;
  &.mask-error {
    top: 450px;
    height: 450px;
  }

  &.active {
    transition: all 0.5s;
    top: 0;
  }

  .title {
    display: flex;
    cursor: pointer;
    justify-content: space-between;
  }

  .m-area {
    padding-top: 20px;
    font-family:
      Microsoft YaHei,
      Microsoft YaHei;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    line-height: 24px;
    text-align: left;
    font-style: normal;
    text-transform: none;

    .province {
      font-size: 14px;
      margin-bottom: 4px;
    }

    .market {
      font-size: 12px;
      margin-bottom: 8px;
    }

    .marea-box {
      margin-right: 10px;
      cursor: pointer;
      @include flex-center();
      font-family:
        Microsoft YaHei,
        Microsoft YaHei;
      font-weight: 400;
      font-size: 10px;
      flex-direction: column;
      color: #3d3d3d;
      line-height: 24px;
      text-align: left;
      font-style: normal;
      text-transform: none;
      border-radius: 4px 4px 4px 4px;

      .shop-name {
        background: #fff;
        border-radius: 4px 4px 4px 4px;
        padding: 0 5px;
      }

      .shop-num {
        font-family:
          Microsoft YaHei,
          Microsoft YaHei;
        font-weight: 400;
        margin-top: 2px;
        font-size: 10px;
        color: rgba(255, 255, 255, 0.75);
        line-height: 20px;
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
    }
  }
}
</style>
